<!--
 * @Author: your name
 * @Date: 2020-10-18 00:46:19
 * @LastEditTime: 2020-10-18 17:02:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\App.vue
-->
<template>
 <div id="app">
  <my-header>{{headerTitle}}</my-header>

  <search-input :placeholder="placeholder" :maxlength="maxlength"/>
  <router-view/>
  <tab></tab>

 </div>
</template>

<script>
import searchInput from '@/components/search'
import MyHeader from '@/components/header'
import Tab from '@/components/tab'
import {computed,getCurrentInstance, onMounted,watch,toRefs} from 'vue'
import {useStore} from "vuex"
import {useRouter} from "vue-router"

import {} from 'vue'
export default {
  name:'App',
  components:{
    MyHeader,Tab,searchInput
  },
  setup(){
    //  const {ctx}=getCurrentInstance()
    //  const store=ctx.$store
    //  const headerTitle=computed(()=>{
    //    return store.state
    //  }).value



    const store=useStore();
      const state=computed(()=>{
       return store.state
     }).value

      const router=useRouter()
      router.push("/")
       store.commit("setPlaceholder","DayPage")
      watch(()=>{
        console.log(router);
        return  router.currentRoute.value.name
      },(value)=>{
        store.commit("setHeaderTitle",value)
        store.commit("setPlaceholder",value)
        store.commit("setMaxlength",value)
      })

    // //  onMounted(()=>{
    //    console.log( store.state.headerTitle);
    // //  })
     return {
       ...toRefs(state)
     }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
